<template>
  <div class='container'>
    <!-- 文章列表 {{channel.id}} ---- {{channel.name}} -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
          v-for="(item,index) in list"
          :key="index"
          :title="item.title"
          @click="$router.push('/article/'+item.art_id)">
            <div slot="label">
              <!-- 图片 -->
              <!-- :border="false"去掉van-grid组件边框 -->
              <van-grid :border="false" :column-num="item.cover.images.length">
                <van-grid-item v-for="(img,idx) in item.cover.images" :key="idx">
                  <van-image lazy-load :src="img"/>
                </van-grid-item>
              </van-grid>
              <!-- 文字说明 -->
              <div class="meta">
                <span>{{item.aut_name}}</span>
                <span>{{item.comm_count}}评论</span>
                <span>{{item.pubdate | relativeTime}}</span>
                <!-- 只有登录的用户才能看见X，在vuex中user有内容 -->
                <span class="close" v-if="$store.state.user" @click.stop="hMoreAction(item.art_id)">
                  <van-icon name="cross"></van-icon>
                </span>
              </div>
            </div>
          </van-cell>
        </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/article.js'
export default {
  name: 'ArticleList',
  data () {
    return {
      list: [],
      isLoading: false, // 是否正在下拉刷新
      loading: false,
      finished: false,
      timestamp: null
    }
  },
  props: {
    // 从父组件中获取当前频道的信息
    channel: {
      type: Object,
      required: true
    }

  },
  created () {
    // 监听事件总线上的delArticle事件
    this.$eventBus.$on('delArticle', (obj) => {
      // console.log(this.channel.id)
      // console.log(obj)
      // 判断是不是要在当前列表中删除
      if (obj.channelId === this.channel.id) {
        // 在list中找到id为obj.articleId的文章删除
        // 1 找下标
        const idx = this.list.findIndex(it => it.art_id.toString() === obj.articleId)
        if (idx !== -1) {
          // 2 找到删除
          this.list.splice(idx, 1)
        }
      }
    })
  },
  methods: {
    // 点击x，弹出更多操作
    hMoreAction (bigintObj) {
      // 修改index.vue中的showMoreAction为true
      // 字传父
      this.$emit('showMoreAction', bigintObj.toString())
    },
    // onload执行时机：
    //  - 页面打开时，van-list内容不足一屏
    //  - 手动上拉
    async onLoad () {
      const result = await getArticles({
        channel_id: this.channel.id,
        timestamp: this.timestamp || Date.now(),
        with_top: 1
      })

      // 拿到返回的数据列表
      const arr = result.data.data.results
      console.log(arr)

      // 1.1  把数据放到list中
      this.list.push(...arr)
      // 1.2更新下次请求发的时间戳
      this.timestamp = result.data.data.pre_timestamp
      // 2  加载状态结束
      this.loading = false
      // 3  判断是否已经加载完全部数据
      if (arr.length === 0) {
        this.finished = true
      }

      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1)
      //   }

      //   // 加载状态结束
      //   this.loading = false

      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true
      //   }
      // }, 1000)
    },

    // 下拉加载
    async onRefresh () {
      const result = await getArticles({
        channel_id: this.channel.id,
        timestamp: Date.now(),
        with_top: 1
      })
      const arr = result.data.data.results
      // 把数据放到list中 ，放在头部
      this.list.unshift(...arr)
      // 提示
      const msg = arr.length ? '刷新成功' : '没有更多数据'
      this.$toast(msg)
      // 修改下拉刷新状态
      this.isLoading = false

      // setTimeout(() => {
      //   this.$toast('刷新成功')
      //   this.isLoading = false
      //   this.count++
      // }, 1000)
    }
  }
}
</script>

<style scoped lang='less'>
.meta {
  display: flex;
  span {
    margin-right:10px;
  }
  // x
  .close {
    // 让x出现在最右边
    // 父元素需要设置display:flex
    margin-left: auto;
  }
}

</style>
